<template>
	<gui-page ref="guiPage" :customHeader="true">
		<template v-slot:gBody>
			<!-- *** *** ** scanCode 必须要的，扫码逻辑 不要删！！！！！ -->
			<scanCode></scanCode>

			<view class="inventory">
				<!-- 库存显示 -->
				<view class="repertory">
					<!-- 搜索 -->
					<view class="repertory_search" @click="goInventory">
						<image class="repertory_search_img"
							src="http://screen.bjdnlsj.com/afl-app/img/202210200852500182_admin.png">
						</image>
						<view class="repertory_search_select">
							<image class="repertory_select_img"
								src="http://screen.bjdnlsj.com/afl-app/img/202210200914570644_admin.png">
							</image>
							<view class="repertory_search_input">{{ $t('materials.queryCommodityInvent') }}</view>
						</view>
					</view>
					<view class="repertory_amount">
						<view class="repertory_amount_number">{{ data.inventoryList.totalQty || 0 }}/<text
								style="font-size:18rpx">{{ $t('materials.box') }}</text></view>
						<view class="repertory_amount_title">{{ $t('materials.totalFinishedGoods') }}</view>
					</view>
					<view class="repertory_monthList">
						<view class="repertory_monthList_left">
							<view class="repertory_monthList_number">{{ data.inventoryList.inQty || 0 }}/<text
									style="font-size:18rpx">{{ $t('materials.box') }}</text></view>
							<view class="repertory_monthList_title">{{ $t('materials.qtyOfThisMonth') }}</view>
						</view>
						<view class="repertory_monthList_right">
							<view class="repertory_monthList_number">{{ data.inventoryList.outQty || 0 }}/<text
									style="font-size:18rpx">{{ $t('materials.box') }}</text></view>
							<view class="repertory_monthList_title">{{ $t('materials.qtyOutThisMonth') }}</view>
						</view>
					</view>
					<!-- 第三模块 图标 -->
					<view class="inventory_icons">
						<view class="inventory_icons_list">
							<view class="inventory_icons_item" v-for="(x, i) in data.icons" :key="i"
								@click="goPage(x.path)">
								<image class="inventory_icons_img" :src="x.imgPath"></image>
								<view class="inventory_icons_desc">{{ x.text }}</view>
							</view>
						</view>
					</view>
				</view>

				<!-- 第二模块 提示信息 消息通知 -->
				<view class="not-msg-box">
					<view class="not-msg-box-left">
						<image class="item-icon" src="@/static/tabBar/annunciate-active.png" alt="" />
					</view>
					<swiper class="swiper-two" :autoplay="true" :interval="2000" :duration="700" :vertical="true"
						:circular="true">
						<swiper-item v-for="(x, i) in data.notMsgList" :key="i">
							<view class="swiper-item-two" @click="getMore">{{ x.messageTitle }}</view>
						</swiper-item>
					</swiper>
					<view class="not-msg-box-right" @click="getMore">
						<text class="gui-list-arrow-right gui-icons gui-color-gray">&#xe601;</text>
					</view>
				</view>

				<!-- 第四模块  单据查看 -->
				<view class="receipts" id="receipt" :style="{ height: data.cssText }">
					<view class="receipts_header">
						<view class="receipts_header_title">{{ $t('materials.checkTheDoc') }}</view>
						<!-- <view class="receipts_header_pulldown" id="pulldowns" @click="pulldown"></view> -->
						<view class="card-rotating" @click.stop="pulldown">
							<uni-icons v-if="!data.showPull" type="bottom" color="#9C9C9C" size="20"></uni-icons>
							<uni-icons v-if="data.showPull" type="top" color="#9C9C9C" size="20"></uni-icons>
						</view>
					</view>
					<view class="receipts_card">
						<view class="receipts_card_item" v-for="(x, i) in data.receipts" :key="i"
							@click="goPage(x.path)">
							<image class="receipts_card_icon" :src="x.imgPath"></image>
							<view class="receipts_card_topic">{{ x.text }}</view>
						</view>
					</view>
				</view>

				<!-- 图表 -->
				<view class="chart">
					<view class="chart_title">{{ $t('JsInternational.ofStock') }}</view>
					<view class="chart_number">
						<view class="chart_number_title">{{ $t('JsInternational.amount') }}</view>
						<view class="chart_number_desc">{{ data.pineTotal || 0 }}</view>
					</view>
					<view class="chart_number" style="background-color:#cab6b5">
						<view class="chart_number_title">{{ $t('JsInternational.totalStockCount') }}</view>
						<view class="chart_number_desc">{{ data.totalTrusts || 0 }}</view>
					</view>
					<view class="chart_picture">
						<qiun-data-charts :animation="false" type="ring" :opts="data.ringOpts"
							:chartData="data.ringChartData" />
					</view>
				</view>

				<view class="chart">
					<view class="chart_title">{{ $t('JsInternational.stockoutStatistic') }}</view>
					<view class="chart_number">
						<view class="chart_number_title">{{ $t('JsInternational.amountOfStockout') }}</view>
						<view class="chart_number_desc">{{ data.lineTotal || 0 }}</view>
					</view>
					<view class="chart_number" style="background-color:#cab6b5">
						<view class="chart_number_title">{{ $t('materials.stockoutAmt') }}</view>
						<view class="chart_number_desc">{{ data.tQTY || 0 }}</view>
					</view>
					<!-- :animation="false" 关闭charts动画防止兼容问题 -->
					<view class="chart_picture">
						<qiun-data-charts :animation="false" type="line" :opts="data.lineOpts"
							:chartData="data.lineChartData" />
					</view>
				</view>

			</view>
		</template>
	</gui-page>
</template>

<script setup>
// 引入文件
import { onMounted, ref, reactive } from "vue";
// 引入跳转相关的路由
import { switchTab, navigate } from "@/utils/routerSkip.js";
import scanCode from "@/components/scan-code/scan-code.vue";
import wybNoticeBar from '@/components/wyb-noticeBar/wyb-noticeBar.vue'
import { IMG_BASE_URL } from "@/constant/config.js"
import { listBizMessageByUserNameId, updateReadFlag, getNotReadMsg, getPdaLineGraph, getPdaReportData } from '@/api/api.js'
import { onShow, onPullDownRefresh } from '@dcloudio/uni-app';
import { USERINFO } from '@/constant/index.js'

//国际化引入
import { useI18n } from 'vue-i18n';
const { t } = useI18n();

const baseUrl = IMG_BASE_URL;

components: {
	scanCode,
		wybNoticeBar
}

let data = reactive({
	notMsgText: '', // 通知消息
	notMsgList: [],
	indicatorDots: true, //轮播图的属性
	autoplay: true,
	interval: 4000,
	duration: 1000,

	icons: [{ //图标列表变量
		path: '/pages/application/index',
		text: 'WMS',
		imgPath:'../../static/invoices/WMS.png'
	}, {
		path: '/pages/application/qmsApplication',
		text: 'QMS',
		imgPath:'../../static/invoices/QMS.png'
	}, {
		path: '/pages/application/mesApplication',
		text: 'MES',
		imgPath:'../../static/invoices/MES.png'
	}, {
		path: '/pages/application/wscApplication',
		text: 'INV',
		imgPath:'../../static/invoices/INV.png'
	}, {
		path: '/pages/sopPage/sopList',
		text: 'SOP',
		imgPath:'../../static/invoices/SOP.png'
	}, {
		path: '/pages/application/restsApplication',
		text: t('materials.other'),
		imgPath:'../../static/invoices/other.png'
	}],

	receipts: [{ //单据查看图标列表变量
		path: '/pages/invoices/purchaseInvoices',
		text: t('purchaseReturn.purchaseReceipt'),
		imgPath:'../../static/invoices/purchaseInvoices.png'
	}, {
		path: '/pages/invoices/salesOutgoingList',
		text: t('materials.salesOutgoing'),
		imgPath:'../../static/invoices/salesOutgoingList.png'
	}, {
		path: '/pages/invoices/distributedInboundOrder',
		text: t('materials.distributedInboundOrder'),
		imgPath:'../../static/invoices/distributedInboundOrder.png'
	}, {
		path: '/pages/invoices/distributedCallOut',
		text: t('JsInternational.distributedCall'),
		imgPath:'../../static/invoices/distributedCallOut.png'
	}, {
		path: '/pages/invoices/otherOutgoingList',
		text: t('materials.otherOutgoingList'),
		imgPath:'../../static/invoices/otherOutgoingList.png'
	}, {
		path: '/pages/invoices/purchaseReturnOrder',
		text: t('materials.purchaseReturnOrder'),
		imgPath:'../../static/invoices/purchaseReturnOrder.png'
	}, {
		path: '/pages/invoices/singleProduction',
		text: t('translationImage.simpleMaterial'),
		imgPath:'../../static/invoices/singleProduction.png'
	}, {
		path: '/pages/invoices/singleProductionReturn',
		text: t('materials.simpleProductionReturn'),
		imgPath:'../../static/invoices/singleProductionReturn.png'
	}, {
		path: '/pages/invoices/directTransfeOrder',
		text: t('taskList.directTransfeOrder'),
		imgPath:'../../static/invoices/directTransfeOrder.png'
	}],

	list: [],
	page: 1,
	rows: 1,
	inventoryList: [],
	// 图表相关的样式
	ringChartData: {}, //饼图
	lineChartData: {}, //折现图
	ringOpts: {
		rotate: false,
		rotateLock: false,
		color: ["#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4", "#1890FF",
			"#ea7ccc"
		],
		dataLabel: true,
		legend: {
			show: true,
			position: "left",
			lineHeight: 30,
			fontSize: 12
		},
		title: {
			name: t('materials.inventoryRatio'),
			fontSize: 12,
			color: "#666666"
		},
		subtitle: {
			name: "100%",
			fontSize: 12,
			color: "#7cb5ec"
		},
		extra: {
			ring: {
				ringWidth: 50,
				activeOpacity: 0.5,
				activeRadius: 10,
				offsetAngle: 0,
				labelWidth: 10,
				border: true,
				borderWidth: 3,
				borderColor: "#FFFFFF",
				linearType: "custom"
			}
		}
	},
	lineOpts: {
		color: ["#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4", "#1890FF",
			"#ea7ccc"
		],
		padding: [0, 10, 15, 10],
		legend: {
			show: true,
			position: "top",
			lineHeight: 5,
		},
		xAxis: {
			disableGrid: true,
			rotateLabel: true, //是否旋转文字角度
		},
		yAxis: {
			gridType: "dash",
			dashLength: 2,
		},
		extra: {
			line: {
				type: "curve",
				width: 2,
			}
		}
	},
	// 柱状图 数据
	pineTotal: null,
	totalTrusts: null,
	columnList: [],
	columnPerc: [],
	// 折线图数据
	categories: [],
	lineData: [],
	lineTotal: null,
	tQTY: null,
	showPull: true,
	cssText: "420rpx"
});

// 跳转页面
const goPage = (path) => {
	console.log(path)
	navigate({
		url: path
	})
};

const goInventory = () => {
	navigate({
		url: '/pages/invoices/stockInquiry'
	})
}


onShow(() => {
	// getRequestData()
	data.notMsgList = []
	getNotMsg()
	chartLsit()
})

onMounted(() => {
	repertoryRingChart();
	repertoryLineChart();
});

//下拉刷新
onPullDownRefresh(() => {
	// getRequestData()
	//data.notMsgList = []
	//getNotMsg()
	// inventory()
	chartLsit()
	repertoryRingChart();
	repertoryLineChart();
	uni.stopPullDownRefresh();
});



const getRequestData = async () => {
	let userInfo = uni.getStorageSync(USERINFO);
	let parmes = {
		page: data.page,
		rows: data.rows,
		userNameId: userInfo.username
	}
	let res = await listBizMessageByUserNameId(parmes)
	data.noticeHooks = false
	if (data.page === 1) {
		if (res.rows.length == 0) {
			data.noticeHooks = true
		}
		data.list = res.rows
	} else {
		if (data.list.length == res.total) {
			data.noticeHooks = true
		} else {
			data.list = [...data.list, ...res.rows]
		}
	}
}
const handelMessage = async (item) => {
	switchTab({
		url: '/pages/annunciate/index'
	})
}
const getNotMsg = async () => {
	let userInfo = uni.getStorageSync(USERINFO);
	let parmes = {
		module: '',
		current: 1,
		size: 999999,
		type: '',
		StartDate: "",
		EndDate: "",
		readFlag: "",
		userNo: userInfo.username
	}
	// getNotReadHomeMsg 接口名换为 getNotReadMsg
	let res = await getNotReadMsg(parmes)
	// console.log(res.data)
	data.notMsgText = res.data?.length ? res.data[0].messageContent : ''
	data.notMsgList = res.data?.records || []
	if (!data.notMsgList.length) {
		data.notMsgList = [{
			messageContent: t('pageTranslation.noNewestInfoFor')
		}]
	}
}
// 查看更多消息
const getMore = () => {
	switchTab({
		url: '/pages/annunciate/index'
	})
}

// 库存获取
// const inventory = () => {
// 	getPdaReportData().then(res => {
// 		if (res.data) {
// 			// console.log(res.data)
// 			data.inventoryList = res.data

// 		}
// 	})
// }

const chartLsit = () => {
	// 柱状图
	getPdaReportData().then(res => {
		let arr = []
		if (res.code == 0) {
			data.inventoryList = res.data
			data.pineTotal = res.data.totalBoxQty;
			data.totalTrusts = res.data.totalPallectQty;
			res.data.materialRates?.forEach(item => {
				arr.push({
					name: item.materialCode,
					value: Number(Number(item.rate).toFixed(2))
				})
			})
			data.columnPerc = arr
		}
	})
	// 折现图的获取
	getPdaLineGraph({
		startDate: monthList(),
		endDate: new Date().toISOString().split('T')[0]
	}).then(res => {
		let arr1 = []
		let arr2 = []
		if (res.code == 0) {
			data.lineTotal = res.data.totalOutQty; //出库总数量
			data.tQTY = res.data.totalOutPallectQty //出库总托数
			res.data.deliveryRates.forEach(item => {
				arr1.push(item.month)  //折现的标题
				arr2.push(Number(item.pallectQty)) //折现的数据
			});
			data.categories = arr1
			data.lineData = arr2
		}
	});
}

// 获取当前月的前面的5月日期
const monthList = () => {
	var start = new Date().getTime() / 1000
	var end = start - (60 * 60 * 24 * 156)
	var lastDate = new Date(parseInt(end) * 1000).getFullYear() + "-" + (new Date(parseInt(end) * 1000).getMonth() + 1) + "-" + new Date(parseInt(end) * 1000).getDate()
	// console.log(lastDate, new Date(parseInt(end) * 1000).toLocaleString())
	return lastDate
}

//  饼图的数据获取
const repertoryRingChart = () => {
	setTimeout(() => {
		//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
		let res = {
			series: [{
				data: data.columnPerc
				// data: [{ "name": "一班", "value": 50 }, { "name": "二班", "value": 30 }, { "name": "三班", "value": 20 }, { "name": "四班", "value": 18 }, { "name": "五班", "value": 8 }]
			}]
		};
		data.ringChartData = JSON.parse(JSON.stringify(res));
	}, 500);
};

// 山峰图
const repertoryLineChart = () => {
	setTimeout(() => {
		let res = {
			categories: data.categories,
			series: [{
				name: t('pageTranslation.qtyOfStockOut'),
				data: data.lineData,
			},],
		};
		data.lineChartData = JSON.parse(JSON.stringify(res));
	}, 500);
};

// 单据查看三角点击事件
const pulldown = () => {
	if (data.showPull) {
		data.cssText = "auto"
		data.showPull = !data.showPull

	} else {
		data.cssText = "420rpx"
		data.showPull = !data.showPull
	}
}
</script>

<style lang="scss" scoped>
* {
	margin: 0;
	padding: 0;
}

// 通知的样式
.not-msg-box {
	display: flex;
	align-items: center;
	background: #fff;
	border-radius: 16rpx;
	margin-bottom: 20rpx;

	.not-msg-box-left,
	.not-msg-box-right {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100rpx;
		height: 100rpx;

		image {
			width: 60%;
			height: 60%;
		}

		.image {
			width: 30%;
			height: 30%;
		}
	}

	.swiper-two {
		flex: 1;
		height: 100rpx !important;

		.swiper-item-two {
			line-height: 100rpx;
			height: 100%;
			width: 100%;
			color: #333;
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			white-space: nowrap; // 默认不换行；
		}
	}
}

@keyframes slide {
	0% {
		background-image: linear-gradient(rgba(0, 0, 0, 0.35),
				rgba(0, 0, 0, 0.35)), url("@/static/carousel/banner1.jpg"); // 实际的背景图片
	}

	25% {
		background-image: linear-gradient(rgba(0, 0, 0, 0.30),
				rgba(0, 0, 0, 0.30)), url("@/static/carousel/banner2.png"); // 实际的背景图片
	}

	50% {
		background-image: linear-gradient(rgba(0, 0, 0, 0.23),
				rgba(0, 0, 0, 0.23)), url("@/static/carousel/banner3.png"); // 实际的背景图片
	}

	75% {
		background-image: linear-gradient(rgba(0, 0, 0, 0.45),
				rgba(0, 0, 0, 0.45)), url("@/static/carousel/banner4.png"); // 实际的背景图片
	}

	100% {
		background-image: linear-gradient(rgba(0, 0, 0, 0.35),
				rgba(0, 0, 0, 0.35)), url("@/static/carousel/banner5.png"); // 实际的背景图片
	}
}

.inventory {

	// 库存
	.repertory {
		padding-top: 10px;
		align-items: center;
		width: 100%;
		margin-bottom: 20rpx;
		color: #333;
		// background-color: #52B5AD;
		// background-image: linear-gradient(rgba(0, 0, 0, 0.35),
		// 		rgba(0, 0, 0, 0.35)), url("@/static/carousel/banner1.jpg"); // 实际的背景图片
		background-size: contain;

		// background-size: cover;
		// background-position: center;
		animation: slide 20s infinite;
		transition: background-image 0s;

		&_search {
			// height: 120rpx;
			display: flex;
			padding-top: 10rpx;

			&_img {
				height: 80rpx;
				width: 80rpx;
				margin-left: 16rpx;
				display: inline-block;
			}

			&_select {
				flex: 1;
				border: none;
				background-color: rgba(92, 90, 90, 0.5);
				height: 50rpx;
				margin-right: 40rpx;
				margin-top: 15rpx;
				border-radius: 40rpx;
				display: flex;

				.repertory_select_img {
					height: 30rpx;
					width: 30rpx;
					margin-left: 20rpx;
					margin-top: 10rpx;
				}

				.repertory_search_input {
					flex: 1;
					color: #B0DAD7;
					height: 40rpx;
					font-size: 24rpx;
					line-height: 30rpx;
					margin-left: 10rpx;
					margin-top: 10rpx;
					text-align: left;
					letter-spacing: 3rpx;
					opacity: 1;
				}
			}
		}

		&_amount {
			width: 100%;
			text-align: center;
			margin-bottom: 10rpx;
			color: #fff;

			&_number {
				height: 80rpx;
				font-size: 56rpx;
				line-height: 110rpx;
				letter-spacing: 2rpx;
				font-weight: 600;
			}

			&_title {
				font-size: 28rpx;
				line-height: 60rpx;
				letter-spacing: 4rpx;

			}
		}

		&_monthList {
			width: 100%;
			font-size: 32rpx;
			display: flex;
			padding: 20rpx 0 20rpx 0;
			box-sizing: border-box;
			margin-bottom: 20rpx;
			color: #fff;

			&_left {
				width: 50%;
				border-right: 3rpx #eee solid;
				text-align: center;
			}

			&_right {
				flex: 1;
				text-align: center;
			}

			&_number {
				font-size: 50rpx;
				line-height: 40rpx;
				font-weight: 600;
				letter-spacing: 2rpx;
			}

			&_title {
				font-size: 24rpx;
				letter-spacing: 4rpx;
			}
		}
	}

	//  图标样式
	&_icons {
		// height: 480rpx;
		// width: 100%;
		background-color: #fff;
		border-top-left-radius: 20rpx;
		border-top-right-radius: 20rpx;
		overflow: hidden;

		&_list {
			display: flex;
			flex-wrap: wrap;
			margin-top: 20rpx;
		}

		&_item {
			width: 33.3%;
		}

		&_img {
			display: block;
			width: 90rpx;
			height: 90rpx;
			border-radius: 20rpx;
			margin: 0 auto;
			box-sizing: border-box;
		}

		&_desc {
			height: 60rpx;
			margin: 10rpx 0 10rpx 0;
			text-align: center;
			font-size: 28rpx;
			letter-spacing: 2rpx;
			color: #111111;
		}
	}
}


// @keyframes slideShow {
// 	0% {
// 		background-image: linear-gradient(rgba(0, 0, 0, 0.35),
// 				rgba(0, 0, 0, 0.35)), url("@/static/carousel/banner1.jpg"); // 实际的背景图片
// 	}

// 	25% {
// 		background-image: linear-gradient(rgba(0, 0, 0, 0.35),
// 				rgba(0, 0, 0, 0.35)), url("@/static/carousel/banner2.jpg"); // 实际的背景图片
// 	}

// 	50% {
// 		background-image: linear-gradient(rgba(0, 0, 0, 0.35),
// 				rgba(0, 0, 0, 0.35)), url("@/static/carousel/banner3.jpg"); // 实际的背景图片
// 	}

// 	75% {
// 		background-image: linear-gradient(rgba(0, 0, 0, 0.35),
// 				rgba(0, 0, 0, 0.35)), url("@/static/carousel/banner4.jpg"); // 实际的背景图片
// 	}

// 	100% {
// 		background-image: linear-gradient(rgba(0, 0, 0, 0.35),
// 				rgba(0, 0, 0, 0.35)), url("@/static/carousel/banner5.jpg"); // 实际的背景图片
// 	}
// }

// 单据查看样式
.receipts {
	background: #fff;
	width: 100%;
	height: 420rpx;
	margin-top: 20rpx;
	color: #333;
	border-radius: 20rpx;
	overflow: hidden;

	&_header {
		height: 60rpx;
		padding-left: 40rpx;
		font-size: 30rpx;
		line-height: 70rpx;
		letter-spacing: 2rpx;
		color: #111111;
		font-weight: 600;
		margin-bottom: 20rpx;
		font-family: "微软雅黑";
		display: flex;
		flex-direction: row;
		position: relative;

		&_title {
			height: 100%;
			width: 60%;
		}

		&_pulldown {
			flex: 1 1 auto;
		}

		.receipts_header_pulldown::after {
			content: "";
			position: absolute;
			top: 24rpx;
			right: 40rpx;
			width: 14rpx;
			height: 14rpx;
			border-right: 2rpx solid #000000;
			border-bottom: 2rpx solid #000000;
			transform: rotate(45deg);
			transition: all 0.3s;
		}

		.receipts_header_pulldown:hover::after {
			transform: rotate(225deg);
		}
	}

	&_card {
		display: flex;
		flex-wrap: wrap;

		&_item {
			width: 30%;
			margin: 10rpx;
			text-align: center;
		}

		&_icon {
			display: block;
			width: 90rpx;
			height: 90rpx;
			border-radius: 20rpx;
			margin: 0 auto;
			box-sizing: border-box;
		}

		&_topic {
			text-align: center;
			font-size: 28rpx;
			letter-spacing: 2rpx;
			color: #111111;
			line-height: 60rpx;
		}
	}
}

// 图表样式
.chart {
	background: #fff;
	margin-bottom: 20rpx;
	overflow: hidden;
	width: 100%;
	margin-top: 20rpx;

	&_title {
		height: 80rpx;
		padding-left: 48rpx;
		line-height: 80rpx;
		font-size: 30rpx;
		font-weight: 600;
	}

	&_number {
		height: 60rpx;
		background-color: #abb8d3;
		margin: 0 20rpx 20rpx 50rpx;
		display: flex;

		&_title {
			width: 240rpx;
			line-height: 60rpx;
			text-align: left;
			font-size: 26rpx;
			margin-left: 20rpx;
		}

		&_desc {
			flex: 1;
			line-height: 60rpx;
			text-align: right;
			font-size: 26rpx;
			margin-right: 20rpx;
		}
	}

	&_picture {
		height: 360rpx;
		margin: 0 40rpx 0 46rpx;
	}
}
</style>
